

import React,{ useState,Suspense,lazy } from 'react'
import { Routes, Route ,Link,useRoutes,useNavigate,NavLink,Outlet} from "react-router-dom";
import {Divider,Spin,Button} from 'antd'
function App() {


  const navigate = useNavigate()
  function jump(){
    navigate('/testRouter/foo/b?a=thd&b=devil', {
      replace: false,
      state: {x:1, y:2}
    }) 
  }


  return (
    <div style={{padding:'24px'}}>
      <h1>React </h1>

      <Link to="/testRouter/foo">路由嵌套</Link> <Divider type="vertical"/>
      <Link to="/testRouter/foo/a">Foo - a</Link> <Divider type="vertical"/>
      <Link to={{
            pathname: "/testRouter/foo/b",
            search: "?a=1&b=2"
          }}   state={{x:3,y:4}}>Foo - b 获取url参数和state</Link> <br/>

      <Link to="/testRouter/bar">Bar</Link> <Divider type="vertical"/>
      <br/>
      <Link to="/testRouter/foo/c">404</Link>
      <Divider type="vertical"/>

      <Button onClick={jump}> 编程式导航跳转 </Button>
      

      <hr/>
      <Outlet></Outlet>
    </div>
  )


}

export default App
